<template>
  <video ref="video"
         controls
         class="video-js vjs-default-skin vjs-big-play-centered">
  </video>
</template>

<script>
  export default {
    data: () => ({
      player: null,
    }),
    props: {
      options: {
        type: Object,
        required: true
      },
    },
    watch: {
      src() {
        this.player.src(this.src);
      }
    },
    computed: {
      src() {
        return this.options.sources[0].src;
      },
      video() {
        return this.$store.state.video;
      }
    },
    mounted() {
      const vm = this;
      this.player = this.$video(this.$refs.video, this.options, function () {

        this.on('play', () => {
          this.volume(vm.video.volume);
        });

        this.on('volumechange', () => {
          vm.video.volume = this.volume();
          window.localStorage.volume = this.volume();
        });

        this.on('error', () => {
          let err = this.error();
          if (err.code === 2) {// 判断是否是网络加载问题
            let buffTime = this.bufferedEnd() - 6;
            this.load(vm.src);
            this.currentTime(buffTime);
            this.play();
          } else {
            vm.alert.err(err.message);
          }
        })
      });
    },
  }
</script>
